<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link href="../../css/element.css" rel="stylesheet">
    <link href="../../css/base.css" rel="stylesheet">
</head>
<body style="background-color: #ddd">
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/index.html">X-Admin</a></span>
                </transition>
            </div>
            <el-menu :collapse="isCollapse" :default-openeds="['1']" active-text-color="#ffd04b" background-color="black"
                     class="el-menu-vertical-demo"
                     default-active="user"
                     style="border: none;" text-color="#fff">
                <a href="/page/end/index.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href=`${item.path}` :key="item.id" v-for="item in user.permission">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
                           @click="handleCollapse" style="font-size: 22px; cursor: pointer"></i>
                    </el-col>
                    <el-col :offset="21" :span="2" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.name}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>

                <el-card style="width: 100%; padding-bottom: 100px">
                    <div class="clearfix" slot="header" style="display: flex">
                        <div style="font-size: 24px; flex: 1">个人信息</div>
                        <div style="flex: 1; text-align: right">
                            <el-button @click="edit" size="small" type="primary">编辑</el-button>
                        </div>
                    </div>
                    <div style="font-size: 18px;">
                        <div style="width: 100px; margin: 0 auto; position: relative; padding-bottom: 20px">
                            <img :src=`/files/${user.avatar}` alt=""
                                 style="width: 100px; height: 100px; border-radius: 50%; ">
                            <input @change="upload" id="avatar" style="width: 100px; height: 100px; opacity: 0; position: absolute; top: 0; left: 0"
                                   type="file">
                        </div>
                        <el-row style="padding: 10px 0">
                            <el-col :span="12" style="text-align: right">姓名：</el-col>
                            <el-col :span="12">{{user.name}}</el-col>
                        </el-row>
                        <el-row style="padding: 10px 0">
                            <el-col :span="12" style="text-align: right">邮箱：</el-col>
                            <el-col :span="12">{{user.email}}</el-col>
                        </el-row>
                        <el-row style="padding: 10px 0">
                            <el-col :span="12" style="text-align: right">电话：</el-col>
                            <el-col :span="12">{{user.phone}}</el-col>
                        </el-row>

                    </div>
                </el-card>

            </el-main>
        </el-container>
    </el-container>

    <el-dialog :visible.sync="dialogFormVisible" close-on-click-modal="false" close-on-press-escape="false"
               show-close="false" title="用户信息" width="30%">
        <el-form :model="user">
            <el-form-item label="用户名" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="电话" label-width="100px">
                <el-input autocomplete="off" style="width: 80%" v-model="user.phone"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="save" type="primary">确 定</el-button>
        </div>
    </el-dialog>

</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>
<script>
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            isCollapse: false,
            entity: {},
            dialogFormVisible: false
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.load();
        },
        methods: {
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            edit() {
                this.dialogFormVisible = true;
            },
            load() {
                $.ajax({
                    url: "/usermessage/like",
                    type: "Get",
                    data: {
                        openid: 'oPEEZ5X3rKkdMKqGYPn_Treo_T4M'
                    }
                }).then(res => {
                    this.user = res;
                    res,
                        console.log(res)
                })

            },
            save() {
                $.ajax({
                    url: "/user",
                    type: "PUT",
                    contentType: "application/json",
                    data: JSON.stringify(this.user)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                        this.load();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                    this.dialogFormVisible = false;
                })
            },
            upload() {
                let formData = new FormData();
                formData.append("file", $("#avatar")[0].files[0])
                $.ajax({
                    url: '/files/upload',
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    data: formData
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "上传成功"
                        });
                        this.user.avatar = res.data;
                        sessionStorage.setItem("user", JSON.stringify(this.user))
                        // 更新用户信息
                        $.ajax({
                            url: '/user',
                            type: 'POST',
                            contentType: "application/json",
                            data: JSON.stringify(this.user)
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>
